<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>备忘录</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 650px;
        height: 700px;
        margin: auto;
    }
    input{
        width: 300px;
        height: 40px;
        font-size: 24px
    }
    #save{
        width: 100px;
        height: 40px;
    }
    #empty{
        width: 200px;
        height: 40px;
    }
    #box3 ul li{
        list-style: none;
        font-size: 24px;
    }
</style>
<body>
    <div class="box">
        <div class="box1">
            <input type="text">
            <button id="save">保存</button>
            <button id="empty">清空本地存储</button>
        </div>
        <div class="box2">
            <h1>任务列表</h1>
        </div>
        <hr>
        <div id="box3">
            <!-- <span id="span"></span> -->
             <ul></ul>
        </div>
    </div>
</body>
<script>
    var lists = []
    window.onload = function () {
        // var save = document.getElementById('save')
        save.onclick = function () {
            var input = document.querySelector('input')
            if (input.value) {
                lists = JSON.parse(localStorage.getItem('lists')) ?? []
                lists.push(input.value)
                localStorage.setItem('lists',JSON.stringify(lists))
                showLists()
            }
        }

        showLists()
    }
    empty.onclick = function () {
        localStorage.removeItem('lists')
        showLists()

    }
    function showLists() {
        // var lisli = document.getElementById('content').value
        var lists = JSON.parse(localStorage.getItem('lists')) ?? []
        var strHTML = ''
        for (var i = 0; i < lists.length;i++){
            strHTML += `<li>任务${i + 1}:${lists[i]}</li>`
        }
        document.querySelector('ul').innerHTML = strHTML
      
    }


    // var str = ''
    // var arr = []
    // document.getElementById('save').onclick = function () {
    //     var con = document.getElementById('content').value
    //     // arr.push(con)
        

    //     for (var i in arr) {
    //         str += `<ul>
    //                     <li>任务：${arr[i]}</li>
    //                 </ul>`
    //     }
    //     document.getElementById('box3').innerHTML += str
    // }



    // window.onload = function () {
    //     function save () {
    //         var content = document.getElementById('content').value
    //         var lis = ''
    //         for (var j in content) {
    //             lis += `<ul><li>${content}</li></ul>`        
    //         }
    //         document.getElementById('box3').innerHTML = lis
    //         console.log(123);
    //     }
    //     var span_ = ''
    //     document.getElementById('save').onclick = function () {
    //         var content = document.getElementById('content').value
    //         // localStorage.setItem('num',num)
    //         // var memorandum
    //         console.log(content);
    //         for (var i = 0; i <= content.lenght; i++) {
    //             span_ += `<ul>
    //                         <li>${span_[i+1] + '<br/>'}</li>
    //                     </ul>`
    //         }
    //         document.getElementById('box3').innerHTML = '任务：' + content
    //         localStorage.setItem('nb',JSON.parse(span))
    //     }
    // }
</script>
</html>